<template>
    <div class="rotation_wrapper" :style="{height:h}" @mouseenter="stopAnimation" @mouseleave="runInterval">
        <div class="content_wrapper" :style="{width:w*len+w_unit,transform:`translateX(-${w*current}${w_unit})`}">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name:"Rotation",
    props:{
        w:{
            type:Number,
            default:100
        },
        w_unit:{
            type:String,
            default:"%"
        },
        len:{
            type:Number,
            default:1
        },
        current:{
            type:Number,
            default:0
        },
        h:{
            type:String,
            default:"100%"
        },
        IntervalTime:{
            type:Number,
            default:10000
        }
    },
    data:()=>{
        return{
            timer:null
        }
    },
    methods:{
        runInterval(){
            let _self = this;
            const { IntervalTime } = this;
            if(this.timer) clearTimeout(this.timer);
            this.timer = setTimeout(
                _self.runInterval
            ,IntervalTime);
            _self.gotoNext();
        },
        gotoNext(){
            const { current, len } = this;
            if(current+1==len){
                this.$emit("changeCurrent",0);
            }else{
                this.$emit("changeCurrent",current+1);
            }            
        },
        stopAnimation(){
            if (!this.timer) return
            clearTimeout(this.timer);
        },
    },
    mounted(){
        this.runInterval();
        let _self=this;
        window.addEventListener("resize",function(){
            _self.stopAnimation();
            _self.runInterval();
        });
    },
    destroyed(){
        this.stopAnimation();
    }
}
</script>

<style lang="scss" scoped>
.rotation_wrapper{
    width:100%;
    overflow: hidden;
    position: relative;
    .content_wrapper{
        height:100%;
        // transition: transform 1s ease-in-out;        
        >div{
            float: left;
        }  
    }
}
</style>
